<template>
<nav class="main-nav">
  <button class="nav-toggle" type="button" @click.prevent="onClickCloseBtn" title="打开/关闭">
    <span class="sr-only">打开/关闭导航</span>
    <i class="fa fa-bars"></i>
  </button>
  <ul class="mod-main-nav">
    <mod-sensitive :activities="['ROLE_MANAGER']">
      <li>
        <router-link to="/basic" @click.native="navShow = false">
        <div class="icon-container">
            <i class="fa fa-cog"></i>
        </div>
        <span>基础管理</span>
        </router-link>
      </li>
    </mod-sensitive>
    <li>
      <router-link to="/dashboard/todos" @click.native="navShow = false">
        <div class="icon-container">
          <i class="fa fa-bell fa-fw"></i>
        </div>
        <span>代办事项<span class="count">{{todos}}</span></span>
      </router-link>
    </li>
  </ul>
</nav>
</template>
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
import ModSensitive from '../ModSensitive.vue'

@Component({ components: { ModSensitive } })
export default class ModMainNav extends Vue {
  @Prop({ type: Number })
  todos: number

  onClickCloseBtn () {
    this.$emit('close')
  }
}
</script>
<style lang="less">
@import url('../../styles/variable.less');

.main-nav {
  color: @nav-font-color;
  background-color: @nav-backgroud-color;

  .nav-toggle {
    display: block;
    outline: none;
    border: none;
    text-align: center;
    background: @nav-toggle-backgroud-color;
    width: 100%;
    margin: 0;
    color: @nav-font-color;
    height: @header-height;
    cursor: pointer;

     &:hover {
      background-color: lighten(@nav-toggle-backgroud-color, 5%);
    }
  }

  .mod-main-nav {
    overflow-y: auto;
    overflow-x: hidden;
    list-style: none;
    margin: 0;
    padding-left: 0;
    position: absolute;
    top: 50px;
    bottom: 65px;

    a {
      display: block;
      padding: 7px 15px 7px 12px;
      font-size: @font-size;
      line-height: 24px;
      color: @nav-font-color;
      text-decoration: none;

      &:hover {
        background: @nav-active-link-backgroud-color;
        text-decoration: none;
      }

      .icon-container {
        width: 34px;
        display: inline-block;
        text-align: center;

        svg {
          position: relative;
          top: 3px;
          margin-right: 13px;

          path {
            fill: @nav-font-color;
          }
        }

        i {
          margin-right: 13px;
        }
      }

      .count {
        float: right;
        padding: 0 7px;
        border-radius: 6px;
        background: @nav-active-link-backgroud-color;
        color: inherit;
      }

      &:hover .count {
        background-color: @color-primary;
      }

      &.router-link-active {
        color: #fff;
        background: @nav-active-link-backgroud-color;

        .icon-container svg path {
          fill: #fff;
        }
      }
    }
  }
}
</style>
